#{extends 'main.html' /}
#{set title:'substitute.html' /}

<h1>Selected UI Elements:</h1>
<ul>
%{
     for(webApp in loadedApps) { 
}%
		<li>
%{
				for(elem in webApp.getSelectedUIElementsIdsAndHtml()) {
					out.print(elem.getHtmlRepresentation());
				}
}%
			<script>
%{
				for(elem in webApp.getSelectedUIElementsIdsAndHtml()) {
}%
					$('#${elem.getHtmlId()}').hover(
						function () {
							$(this).addClass("selectable");
							$(this).bind('click',
								function() {
									$('#substitutionElementId').val('${elem.getId()}');
									$('#substitutionForm').submit();
								}
							);
						},
						function () {
							$(this).removeClass("selectable");
							$(this).unbind('click');
						}
					);
%{
				}
}%

%{
				for(elem in webApp.getSelectedUIElementsForSubstitutionsHtmlIds()) {
}%
					$('#${elem.getHtmlId()}').removeClass("selectable");
					$('#${elem.getHtmlId()}').unbind('click');
					$('#${elem.getHtmlId()}').addClass("selected");
%{
				}
}%
			</script>
		</li>
%{
     }
}%
</ul>
<form id="substitutionForm" method="POST" action="@{Composition.selectForSubsitution()}">
	<input id="substitutionElementId" type="hidden" name="elementId" value="" />
</form>

<form method="POST" action="@{Composition.performSubstitution()}">
	<input type="submit" value="Perform Substitution" />
</form>

<h1>Save Composition</h1>
<form method="POST" action="@{Composition.saveCompo()}">
	<label for="appName">Application Name:</label>
	<input type="text" name="appName" />
	<input type="submit" value="Save Composition" />
</form>